<template>
  <div class="chat-test-container">
    <h2>WebSocket聊天功能测试</h2>
    
    <div class="user-selection">
      <el-radio-group v-model="currentUserType" @change="switchUser">
        <el-radio-button label="user1">用户1 (user001)</el-radio-button>
        <el-radio-button label="user2">用户2 (user002)</el-radio-button>
        <el-radio-button label="customerService">客服 (cs001)</el-radio-button>
      </el-radio-group>
    </div>
    
    <div class="chat-area">
      <div class="user-chat">
        <h3>{{ currentUserType === 'customerService' ? '客服聊天界面' : '用户聊天界面' }}</h3>
        <ChatComponent 
          :current-user-id="currentUserId" 
          :is-customer-service="currentUserType === 'customerService'"
        />
      </div>
    </div>
    
    <div class="usage-guide">
      <h4>使用说明：</h4>
      <ul>
        <li>选择不同的用户身份进行测试</li>
        <li>客服端可以看到在线用户列表，可以点击用户开始聊天</li>
        <li>普通用户需要等待客服发起聊天</li>
        <li>消息实时传输，无需刷新页面</li>
        <li>聊天记录不持久化，刷新页面后消失</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChatComponent from '../components/ChatComponent.vue'

const currentUserType = ref('user1')
const currentUserId = ref('user001')

const switchUser = () => {
  switch (currentUserType.value) {
    case 'user1':
      currentUserId.value = 'user001'
      break
    case 'user2':
      currentUserId.value = 'user002'
      break
    case 'customerService':
      currentUserId.value = 'cs001'
      break
  }
}
</script>

<style scoped>
.chat-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.user-selection {
  margin: 20px 0;
  text-align: center;
}

.chat-area {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.user-chat {
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background-color: #fafafa;
}

.usage-guide {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.usage-guide ul {
  margin-left: 20px;
}

.usage-guide li {
  margin-bottom: 8px;
  line-height: 1.6;
}
</style>